<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <Add :addMsg="addMsg"/>
      </el-col>
      <el-col :span="6">
        <list :comments="comments" :deleMsg="deleMsg"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  /* 引入组件 */
  import Add from './components/Add'
  import List from './components/List'

    export default {
      data () {
        return {
          comments: [{nickName:'ZS', msg:'Vue  哈哈哈啊哈'},{nickName:'LS', msg:'Vue  噜噜噜噜'}]
        }
      },
      methods: {
        addMsg (comment) {
          this.comments.unshift(comment);
        },
        deleMsg (index) {
          this.comments.splice(index, 1);
        }
      },
      /* 映射成标签 */
      components: {
        Add,
        List
      }
    }
</script>

<style>
  *{
    padding: 0;
    margin: 0;
  }
  .item{
    border-style:solid;
    border-color:#CCCCCC;
    border-width: 1px;
    border-radius: 3px;
    width: 100%;
    padding: 10px;
  }
</style>
